<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阅微札记</title>
    <link rel="icon" href="/static/favicon.png" type="image/png">
    <link rel="stylesheet" href="/static/plugins/bootstrap-5.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugins/fontawesome-free-6.0.0-web/css/all.min.css">
    <link rel="stylesheet" href="/static/css/webBase.css">
    <script src="/static/js/jquery-3.7.1.min.js"></script>
    <script src="/static/js/bootbox.min.js"></script>
    <!-- 为了更好地兼容移动设备，使用CSS的媒体查询功能 -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>
        @font-face {
            font-family: 'MaobilogoFont'; /* 字体名称 */
            src: url('/static/fonts/xmfont1617.tff') format('truetype');
        }
    </style>
    
<style>
    .index-leftside {
        text-align: left;
        padding-left: 30px;
        margin-bottom: 5px;
    }

    .article-list-item {
        display: flex;
        /*align-items: center;*/
        gap: 24px;
    }

    .article-list-item .summary {
        flex: 1;
        min-width: 0;
        text-align: justify;
    }

    .article-list-item .thumbnail {
        width: 120px;
        max-width: 120px;
        max-height: 90px;
        flex-shrink: 0;
        align-content: center;
    }
    .article-list-item .thumbnail img {
            width: 100%;
            height: 100%;
            /*height: auto;*/
            border-radius: 4px;
            object-fit: cover;
        }
</style>

</head>
<body>


<!--导航栏区域-->
<div class="menu">
    <div class="container-fluid">
        <div class="navbar navbar-expand-lg">
            <div class="container" style="padding: 0">
                <a class="navbar-brand" href="#"><img src="../static/img/logo.png" width="150"></a>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="/">首页</a>
                        </li>
                        
                        <li class="nav-item">
                            <a class="nav-link" href="/type/1-1">工作</a>
                        </li>
                        
                        <li class="nav-item">
                            <a class="nav-link" href="/type/2-1">Python开发</a>
                        </li>
                        
                        <li class="nav-item">
                            <a class="nav-link" href="/type/3-1">Web前端</a>
                        </li>
                        
                        <li class="nav-item">
                            <a class="nav-link" href="/type/4-1">典型应用</a>
                        </li>
                        
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                               aria-expanded="false">
                                其他
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" style="color: black" href="#">联系我</a></li>
                                <li><a class="dropdown-item" style="color: black" href="#">帮助</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" style="color: black" href="#">about</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!--搜索框-->
                <div class="d-flex search-container search-box" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
                           id="searcharticle" onkeyup="doSearch(event)">
                    <button class="btn btn-outline-light search-button" type="button" onclick="doSearch(null)"><i
                            class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="navbar-nav me-auto mb-2 mb-lg-0" style="align-items: center" id="bell-container">
                    <!-- 通知图标 -->
                    <li style="position: relative;">
                        <a role="button" class="btn btn-light btn-sm position-relative no-read"
                           data-bs-toggle="dropdown"
                           data-bs-trigger="hover" aria-expanded="false"
                           style="background-color: #ffffff;border: solid 0;padding-top: 5px;">
                            <i class="fas fa-bell"></i>
                            <span id='bell-red-circle'
                                  class="position-absolute top-50 start-100 translate-middle badge rounded-pill p-1 rounded-circle">
                            <span id='hid-noread' class="visually-hidden"></span>
                                </span>
                        </a>
                        <ul class="dropdown-menu" style="position: absolute;">
                            <!--通知列表这里生成-->
                            <div id="notificationsList" class="notifications-list">
                                <!-- 通知列表将在这里动态生成 -->
                                <li><a class="dropdown-item" href="#" id="no-comment">评论</a></li>
                                <li><a class="dropdown-item" href="#" id="no-like">赞</a></li>
                                <li><a class="dropdown-item" href="#" id="no-reply">回复</a></li>
                                <li><a class="dropdown-item" href="#" id="no-system">系统通知</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="#" id="clear-noti">清除所有通知</a></li>
                            </div>

                        </ul>
                    </li>
                </div>
                <div id="user-login-container">

                </div>
            </div>
        </div>
    </div>
</div>

<!--中间区域-->
<div class="container">
    <div class="row">
        
<!--正文左侧-->
<!--首页正文左侧-->
<div class="col-sm-2">
    <div class="article-panel" style="margin-right: 10px;align-items: center;padding-left: 10px;padding-right: 10px">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link index-leftside" type="button" href="#"
               style="background-color: #eaf2ff;color: #1e80ff;border-radius: 3px;margin-bottom: 10px;"><i
                    class="fa fa-star" aria-hidden="true" style="padding-right: 20px"></i>综&nbsp;&nbsp;&nbsp;合
            </a>
            <button class="nav-link index-leftside" id="v-pills-follow-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-profile"
                    type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i
                    class="fa fa-podcast" aria-hidden="true" style="padding-right: 24px"></i>关&nbsp;&nbsp;&nbsp;注
            </button>
            <button class="nav-link index-leftside" id="v-pills-article-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-profile"
                    type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"
                    onclick="memocreate()">
                <a href="/memos" style="color: inherit;"><i class="fa fa-pencil-square" aria-hidden="true" style="padding-right: 23px"></i>备忘录</a>
            </button>
            <button class="nav-link index-leftside" id="v-pills-profile-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-profile"
                    type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false"><i
                    class="fa-solid fa-newspaper" style="padding-right: 21px"></i>AI写作
            </button>
            <button class="nav-link index-leftside" id="v-pills-disabled-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-disabled"
                    type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false"><i
                    class="fa-solid fa-robot" style="padding-right: 17px"></i>AI工具
            </button>
            <button class="nav-link index-leftside" id="v-pills-messages-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-messages"
                    type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i
                    class="fa fa-external-link-square" aria-hidden="true" style="padding-right: 24px"></i>最&nbsp;&nbsp;&nbsp;新
            </button>
            <button class="nav-link index-leftside" id="v-pills-paihang-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-messages"
                    type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false"><i
                    class="fa fa-bar-chart" aria-hidden="true" style="padding-right: 22px"></i>排行榜
            </button>
            <button class="nav-link index-leftside" id="v-pills-settings-tab" data-bs-toggle="pill"
                    data-bs-target="#v-pills-settings"
                    type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false" disabled><i
                    class="fa fa-trophy" aria-hidden="true" style="padding-right: 21px"></i>活&nbsp;&nbsp;&nbsp;动
            </button>
        </div>
    </div>
</div>





<!--中间文章-->
<div class="col-sm-7 col-12" style="margin-bottom: 40px">

    <!--文章列表-->
    <div class="article-list article-panel" style="margin-right: 10px">

        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/27">
                    <span>fetch API、jQuery Ajax 与 axios 详解</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/27">
                        fetch api、jquery Ajax、axios,使用教程和使用区别了解 fetch API、jQuery Ajax 和 axios 的区别及使用方法，对前端开发至关重要。我用一个表格来概括它们的主要特性，帮你快速建立直观认识：特性维度fetch API (现代标准)jQuery Ajax (传统方案)axios (流行库...
                    </a>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-09-02 11:39:39</span>
                <span data-post-id="18985468" class="post-bottom-info">777</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：Web前端</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(5)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/26">
                    <span>flask 之路【第一篇】请求、认证、路由</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/26">
                        ⚙️本教程工程文件{ProjectName}:Practiceflask0618{ProjectName}:Practiceflask0619[TOC]一、flask快速应用pip install flask 1.1 flask介绍flask框架基于 Werkzeug的wsgi(web服务网关接口)实现，flask自己没有wsgi用户请求一旦到来就会执行app.__call__方法...
                    </a>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-09-01 19:17:35</span>
                <span data-post-id="18985468" class="post-bottom-info">浪浪山小妖</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：Python开发</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(14)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/25">
                    <span>2.redis缓存及静态化组件</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/25">
                        我来为你整理一份 Redis 常用命令列表。为了确保信息的准确性和完整性，我会通过网络搜索来获取最新的官方文档和权威资料，然后为你整理出一份清晰、易读的命令列表。 好的，我已经查阅了相关资料，为你整理了一份详尽的 Redis 常用命令列表。这份列表按照 Red...
                    </a>
                </div>
                
                <div class="thumbnail">
                    <img src="/upload/thumb/image/20250901/fe5e432d290044fdb6b5504d1f4f0f63.png" alt=" "/>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-09-01 19:15:14</span>
                <span data-post-id="18985468" class="post-bottom-info">浪浪山小妖</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：Python开发</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(1)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/24">
                    <span>redis缓存及静态化组件</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/24">
                        我来为你整理一份 Redis 常用命令列表。为了确保信息的准确性和完整性，我会通过网络搜索来获取最新的官方文档和权威资料，然后为你整理出一份清晰、易读的命令列表。 好的，我已经查阅了相关资料，为你整理了一份详尽的 Redis 常用命令列表。这份列表按照 Red...
                    </a>
                </div>
                
                <div class="thumbnail">
                    <img src="/upload/thumb/image/20250901/fe5e432d290044fdb6b5504d1f4f0f63.png" alt=" "/>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-09-01 19:08:50</span>
                <span data-post-id="18985468" class="post-bottom-info">浪浪山小妖</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：Python开发</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(0)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/23">
                    <span>常见面试题知识点</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/23">
                        常见面试题知识点面试题1. 编程语言及他们之间的区别？C/C++：很多语言的底层实现都是与C，代码执行效率高，自己做内存管理，对代码要求比较高，很多功能需要手动试下。Java：比较好的编程语言，很多企业级应用都会选择Java。C#：是微软开始的编程语言，部署时...
                    </a>
                </div>
                
                <div class="thumbnail">
                    <img src="/upload/thumb/image/20250830/0288050fe2994d70b59f98272992774c.png" alt=" "/>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-08-30 17:44:48</span>
                <span data-post-id="18985468" class="post-bottom-info">浪浪山小妖</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：Web前端</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(19)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/22">
                    <span>今日概要：</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/22">
                        day12 CSS今日概要：案例应用（利用之前所学知识）CSS知识点模板 + CSS + 构建页面1.CSS案例1.1 内容回顾HTML标签  固定格式，记住标签长什么样子，例如：   h/div/span/a/img/ul/li/table/input/formCSS样式引用CSS：标签、头部、文件.xx{     ... } ...
                    </a>
                </div>
                
                <div class="thumbnail">
                    <img src="/upload/thumb/image/20250830/2f3c7a00ddab4c729cd8ca9e6649599f.png" alt=" "/>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-08-30 14:53:02</span>
                <span data-post-id="18985468" class="post-bottom-info">浪浪山小妖</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：Python开发</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(1)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/21">
                    <span>day12 CSS</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/21">
                        day12 CSS今日概要：案例应用（利用之前所学知识）CSS知识点模板 + CSS + 构建页面1.CSS案例1.1 内容回顾HTML标签  固定格式，记住标签长什么样子，例如：   h/div/span/a/img/ul/li/table/input/formCSS样式引用CSS：标签、头部、文件.xx{     ... } ...
                    </a>
                </div>
                
                <div class="thumbnail">
                    <img src="/upload/thumb/image/20250830/8a7d8b5aa7254792856f4b0123a94615.png" alt=" "/>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-08-30 14:50:07</span>
                <span data-post-id="18985468" class="post-bottom-info">浪浪山小妖</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：Web前端</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(3)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/20">
                    <span>Python Flask开发实战教学笔记</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/20">
                        Python Flask开发实战教学笔记2020-04-08：1. 语言无关的技术：前端技术，Redis，静态化处理，全文搜索，接口与性能，MVC，ORM。。。。2. 基于蜗牛笔记但是不要拘泥于蜗牛笔记，发散，衍生，设计和开发对自己或企业有价值的产品。3. 多练习，争取自己独立完...
                    </a>
                </div>
                
                <div class="thumbnail">
                    <img src="/upload/thumb/image/20250830/6bff3877ad66426bab2828f1ab7d2f14.png" alt=" "/>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-08-30 14:36:27</span>
                <span data-post-id="18985468" class="post-bottom-info">浪浪山小妖</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：Python开发</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(2)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/19">
                    <span>面试题</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/19">
                        面试题1. 编程语言及他们之间的区别？C/C++：很多语言的底层实现都是与C，代码执行效率高，自己做内存管理，对代码要求比较高，很多功能需要手动试下。Java：比较好的编程语言，很多企业级应用都会选择Java。C#：是微软开始的编程语言，部署时需要放在window s...
                    </a>
                </div>
                
                <div class="thumbnail">
                    <img src="/upload/thumb/image/20250830/4b562e2d0d604acdad850dc9d0706034.jpg" alt=" "/>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-08-30 12:36:46</span>
                <span data-post-id="18985468" class="post-bottom-info">浪浪山小妖</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：Python开发</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(1)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <div class="post col-12">
            <div class="col-12 postTitle" aria-level="2">
                <a href="/article/18">
                    <span>Python Flask开发实战教学笔记</span>
                </a>
            </div>
            <div class="col-12 postintro article-list-item">
                <div class="summary">
                    <a href="/article/18">
                        2020-04-08：语言无关的技术：前端技术，Redis，静态化处理，全文搜索，接口与性能，MVC，ORM。。。。基于蜗牛笔记但是不要拘泥于蜗牛笔记，发散，衍生，设计和开发对自己或企业有价值的产品。多练习，争取自己独立完成，添加有自己特色的功能。Python环境配置...
                    </a>
                </div>
                
            </div>
            <div class="col-12 post-otherinfo" style="text-align: right;color: #aaaaaa">
                <span data-post-id="18985468" class="post-bottom-info">2025-08-30 12:18:13</span>
                <span data-post-id="18985468" class="post-bottom-info">浪浪山小妖</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-tree"
                                                                          aria-hidden="true"></i>类别：工作</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-book"
                                                                          aria-hidden="true"></i>阅读(1)</span>
                <span data-post-id="18985468" class="post-bottom-info"><i class="fa fa-comment"
                                                                          aria-hidden="true"></i>评论(0)</span>
            </div>
            <div class="col-12 postSeparator"></div>
        </div>
        
        <!--分页-->
        <div class="col-12" style="margin-top: 40px">
            <nav aria-label="Page navigation example">
                <ul class="pagination page">
                    
                    <!--<li class="page-item"><a class="page-link" href="#">上一页</a></li>-->
                    
                    
                    <li class="page-item"><a class="page-link" href="/page/1">1</a></li>
                    
                    <li class="page-item"><a class="page-link" href="/page/2">2</a></li>
                    
                    
                    <li class="page-item"><a class="page-link" href="/page/2">下一页</a></li>
                    
                </ul>
            </nav>
        </div>
    </div>

</div>

<!--子页面-->
<!--右侧边栏-->
<div class="col-sm-3 col-12 postSide" id="side_most_recommend">
    <!--搜索框-->
    <!--            <div class="search-bar row">-->
    <!--                <div class="col-8">-->
    <!--                    <input type="text" class="form-control" id="keyword" placeholder="请输入关键字"/>-->
    <!--                </div>-->
    <!--                <div class="col-4" style="text-align:right;">-->
    <!--                    <button type="button" class="btn btn-primary">搜索</button>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--最新文章-->
    <div class="side article-panel">
        <div class="col-12 tip"><i class="fa fa-coffee" aria-hidden="true"
                                   style="color: orange;padding-right: 10px"></i>热门文章
        </div>
        <div>
            <!--axios动态填充-->
            <ul>
                <li v-for="(item,idx) in mostItems">
                    <a v-bind:href="'/article/'+item.id">{[idx+1]}.{[item.headline.slice(0,25)]}...</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="fixedmenu" class="side article-panel" style="margin-top: 35px">
        <div class="col-12 tip"><i class="fa fa-coffee" aria-hidden="true"
                                   style="color: orange;padding-right: 10px"></i>文章推荐
        </div>
        <div>
            <!--ajax动态填充-->
            <!--axios动态填充-->
            <ul>
                <li v-for="(item,idx) in recommendItems">
                    <a v-bind:href="'/article/'+item.id">{[idx+1]}.{[item.headline.slice(0,25)]}...</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="../../static/plugins/axios.min.js"></script>
<script src="../../static/plugins/vue2.js"></script>
<script>
    var app = new Vue({
        el: '#side_most_recommend',
        data: {mostItems: [], recommendItems: []},
        delimiters: ['{[', ']}'],
        created: function () {
            axios({
                method: 'get',
                url: '/api/most_recommend',
                headers: {
                    'Content-Type': 'application/json'
                }
            }).then((res) => {
                // console.log(res.data)
                this.mostItems = res.data[0];
                this.recommendItems = res.data[1];
                // console.log(this.mostItems);
            }).catch(err => {
                console.log('动态渲染失败：', err);
            })
        }
    })
    <!--将右侧边栏的内容一直固定在屏幕上，无论怎么滚动滚轮-->
    window.document.addEventListener('DOMContentLoaded',
        function () {
            var fixDiv = document.getElementById("fixedmenu");
            var Y = fixDiv;
            var H = 0;
            // 获取该部件距离页面顶部的距离
            while (Y) {
                H += Y.offsetTop;
                Y = Y.offsetParent;
            }
            // 事件监听滚轮的移动距离
            window.addEventListener('scroll', function () {
                if (window.scrollY > (H + 200)) {
                    fixDiv.style = "position:fixed;top:0;margin-top:0;width:331px";
                } else {
                    fixDiv.style = "";
                }
            })
        }
    )
</script>




    </div>
</div>


<!--底部区域-->
<!--<div class="container-fluid footer">-->
<!--    <div class="row">-->
<!--        <div class="col-12 page-bottom-info"><a href="#">友情链接：</a><a href="#">xx中台</a><a href="#" style="margin: 0 20px">AI中心</a><a-->
<!--                href="#">智能中心</a></div>-->

<!--    </div>-->
<!--</div>-->


<!-- back-to-top-button引用了yueweinote.js文件 -->
<button id="back-to-top" class="back-to-top">回到顶部</button>


<script src="../static/plugins/bootstrap-5.3.7-dist/js/bootstrap.bundle.js"></script>
<!--鼠标特效-->
<script src="../static/js/cursor-effects.js"></script>
<!--自定义js-->
<script src="../static/js/yueweinote.js"></script>
<!--实现通知悬停，显示未读消息数-->
<script>
    const button = document.querySelector('.no-read');
    const no_read_count = button.querySelector("#hid-noread")
    button.addEventListener('mouseenter', function () {
        no_read_count.classList.remove('visually-hidden'); //鼠标进入按键上方,移除消息通知的隐藏类，让他显示
    });

    button.addEventListener('mouseleave', function () {
        no_read_count.classList.add('visually-hidden'); // 鼠标离开按键，添加消息通知的隐藏类，让他隐藏
    });
</script>
<!--获取未读消息，然后通知在通知栏-->
<script>
    window.addEventListener('DOMContentLoaded',checkLoginStatus())
    //检查登录状态
    function checkLoginStatus() {
        fetch('/loginfo').then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            } else {
                return response.json()
            }
        }).then(data => {
            let content = '';
            const bell_container = document.getElementById("bell-container");
            const userArea = document.getElementById('user-login-container')
            //如果已登录则渲染登陆区，渲染通知区。
            if (data.logged_in) {
                //已登录，则渲染登陆区，渲染通知区。
                content += `<div class="user-area">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0 clearfix" style="align-items: center">
        <li class="nav-item dropdown" style="margin: 0 10px">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
               aria-expanded="false" style="color: #1da1f2"><img
                    style="width: 35px;margin-right: 5px;border-radius: 50%"
                    src="../static/img/avatar/${data.avatar}">${data.nickname}
            </a>
            <ul class="dropdown-menu">
                <li>`;
                if (data.role === 'admin'){
                    content += `<a class="dropdown-item" style="color: black;"
                                  href="/admin/center">系统管理</a>`;
                }else{
                    content += `<a class="dropdown-item" style="color: black;"
                                  href="/user/center">用户中心</a>`
                }
                content +=`</li>
                <li><a class="dropdown-item" style="color: black" href="#">联系我</a></li>
                <li><a class="dropdown-item" style="color: black" href="#">帮助</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" style="color: black" href="/logout">退出登录</a></li>
            </ul>
        </li>
    </ul>
</div>`;
                // 检查通知区
                checkNotifications()

            } else {
                //隐藏铃铛 渲染登录按键
                bell_container.style.display = 'none';
                content +=`<div>
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item" style="margin: 0 10px">
            <a href="/login">
                <button class="btn btn-primary" type="button">登 录</button>
            </a>
        </li>
    </ul>
</div>`
            }
            userArea.innerHTML=content;
        })
    }

    // 新增：检查新通知
    function checkNotifications() {

        // 实际应用中应该调用API检查新通知
        fetch('/api/notifications/count')
            .then(response => response.json())
            .then(notifications => {

                // console.log(notifications)
                processNotifications(notifications);
            })
            .catch(error => {
                console.error('获取通知失败:', error);
            });
    }

    // 处理通知
    function processNotifications(notifications) {
        var flag = 0; //没有未读消息
        const sum = Object.values(notifications).reduce((acc, curr) => acc + curr, 0)

        if (notifications.comment_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-comment');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.comment_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (notifications.like_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-like');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.like_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (notifications.reply_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-reply');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.reply_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (notifications.system_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-system');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.system_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (notifications.total_count > 0) {
            flag = 1;
            const notificationsItem = document.getElementById('no-notification');
            const notificationhtml = notificationsItem.textContent + `<span class="badge rounded-pill bg-danger py-1 rounded-circle" aria-hidden="true" style="float: right">${notifications.total_count}</span>`;
            notificationsItem.innerHTML = notificationhtml;
        }
        if (flag == 1) {
            const notificationsCircle = document.getElementById('bell-red-circle');
            notificationsCircle.classList.add('bg-danger');
            const notificationSound = document.getElementById('hid-noread');
            notificationSound.textContent = sum + '条未读通知';
        } else {
            const notificationsCircle = document.getElementById('bell-red-circle');
            notificationsCircle.classList.remove('bg-danger');
        }

    }

    //清除通知内容
    const clr_noti = document.getElementById('clear-noti')
    clr_noti.addEventListener('click', function () {
        fetch('/api/clear/notifications')
            .then(response => {
                if (!response.ok) { // 手动检查HTTP状态码
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json(); // 解析JSON响应体
            })
            .then(data => {
                if (data.success === 1) {
                    window.location.reload()
                }
                console.log(data)
            }).catch(error => {
            console.error('Error:', error); // 捕获网络错误或手动抛出的错误
        })
    })

</script>





</body>
</html>